<template>
	<div id="page">
		<img class="page-bg" src="../../assets/app-bg.jpg" >
		<van-nav-bar class="navTop" :title="$t('header.Agent_promotion')" left-arrow=""  @click-left="navLeft" ></van-nav-bar>
		
		<div class="main">
			<div class="block">
				<img class="bg" src="../../assets/my-noney.png" >
				{{TeamData.total}}
				<span class="label">{{$t('page.Agent_Assets')}} (USDT)</span>
			</div>
			
			<div class="tab" :class="tab_i == 2 ? 'tab2' : '' " >
				<div class="li" @click="tab(1)">{{$t('page.Direct_push')}}（{{zt}} ）</div>
				<div class="li" @click="tab(2)">{{$t('page.Team')}}（ {{team}} ）</div>
				<div class="line"></div>
			</div>
			<div v-if="tab_i == 1" class="tab-main">
				<div class="li" v-for="(item,index) in TeamData.zt">
					<div class="name">{{item.address}}</div>
					<span class="time">{{item.date}}</span>
				</div>
			</div>
			
			<div v-else class="tab-main">
				<div class="li" v-for="(item,index) in TeamData.team">
					<div class="name">{{item.address}}</div>
					<span class="time">{{item.date}}</span>
				</div>
			</div>
			
		</div>
		
		
	</div>
</template>

<script>
	import { Toast } from 'vant';
	
	import {mapState} from "vuex";
	import store from '@/store'
	import Web3 from "web3";
	
	export default {
		name:"agent",
		data() {
			return {
				tab_i:1,
				userData:[],
				address:'',
				
				TeamData:[],
				zt:0,
				team:0
				
			}
		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		watch: {
			'user': function(e) {
				// 新旧地址对比
				if(e.address == this.$dapp.getAddress()){
					this.userData = e
					this.UserTeam(e.address)
				}else{
					this.$parent.UserInfo(this.$dapp.getAddress())
				}
				this.$forceUpdate();
			}
		},
		mounted() {
			this.UserTeam(this.$dapp.getAddress())
		},
		methods: {
			
			navLeft(){
				 this.$router.go(-1);//返回上一层
			},
			
			tab(e){
				var tab = this.tab_i;
				if( tab != e){
					this.tab_i = e;
				}
			},
			async UserTeam(e) {
				if(e == null){
					Toast.fail(this.$t('tis.addressNo'))
					console.log('还未获取地址')
					return
				}
				
				const {err,res} = await this.$request.get("/chss/user/team_detail", {
					address: e,
				});
				if (err === null) {
					this.TeamData = res;
					this.zt = res.zt.length
					this.team = res.team.length
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{background: #20283d;}
	
	.block{
		padding: 100px;
		margin: 30px; border-radius: 20px;
		background: #1256d5;
		text-align: center;
		color: #cca837; font-size: 50px; 
		position: relative; z-index: 1;
		
		.bg{
			position: absolute;
			top: 0px; left:0px;
			width: 100%; height:100%;
			z-index: -1;
		}
		
		.label{
			font-size: 28px; color:#3082ec;
			display: block;
		}
	}
	
	.tab{
		display: flex; position: relative;
		.li{flex: 1; text-align: center; line-height: 80px; color: #3d558c; }
		
		.line{height: 4px; width: 250px; 
			position: absolute;
			bottom: 0px; left: 25%; margin-left: -125px;
			background:#188AFF;
			background: -moz-linear-gradient(to right,#1368f8 , #5ef2ff);
			background:  -webkit-linear-gradient(to right,#1368f8 , #5ef2ff);
			background: -o-linear-gradient(to right,#1368f8 , #5ef2ff);
			background: -ms-linear-gradient(to right,#1368f8 , #5ef2ff);
			background:  linear-gradient(to right,#1368f8 , #5ef2ff);
			
			transition: all 0.3s;
			-webkit-transition: all 0.3s; /* Safari 和 Chrome */
			-ms-transition: all 0.3s; 	/* IE 9 */
			-moz-transition: all 0.3s; 	/* Firefox */
			-o-transition: all 0.3s;	/* Opera */
			
		}
		& .li:nth-child(1){
			color: #fff;
		}
		
		&.tab2{
			.line{left: 75%;}
		}
		&.tab2 .li:nth-child(2){
			color: #fff;
		}
		&.tab2 .li:nth-child(1){
			color: #3d558c;
		}
		
	}
	
	.tab-main{
		
		.li{
			margin: 30px; border: 2px solid #252f4b; border-radius: 10px; 
			padding: 0px 30px; height: 120px; line-height: 120px;
			display: flex;
			
			.name{flex: 1; color: #eee;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}
			
			.time{ flex: 1; color: #304677; text-align: right;}
			
		}
	}
	
</style>
